<template>
  <el-dialog :title="title" :visible.sync="visible" width="500px" append-to-body custom-class="import-dialog"
  >
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="业主类型" prop="proprietorType">
        <el-radio-group v-model="form.proprietorType">
          <el-radio label="1">个人业主</el-radio>
          <el-radio label="2">企业业主</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="名称" prop="proprietorName">
        <el-input v-model="form.proprietorName"></el-input>
      </el-form-item>
      <el-form-item label="身份证" v-if="form.proprietorType === '1'" prop="cardNumber">
        <el-input v-model="form.cardNumber" maxlength="18"></el-input>
      </el-form-item>
      <el-form-item label="社会信用代码" v-if="form.proprietorType === '2'" prop="socialCreditCode">
        <el-input v-model="form.socialCreditCode" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="proprietorMobile">
        <el-input v-model="form.proprietorMobile" maxlength="11"></el-input>
        <span class="mobile-tips">手机号作为业主的登录账号</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { debounce } from '@/utils'
import { addProprietor } from '@/api/contract/proprietor'

export default {
  name: 'add',
  props: {
    title: {
      default: '新增业主合同'
    },
    value: {
      default: false
    }
  },
  data() {
    return {
      visible: false,
      form: {},
      rules: {
        proprietorType: [
          { required: true, message: '请选择业主类型', trigger: 'blur' }
        ],
        proprietorName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        proprietorMobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        cardNumber: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        socialCreditCode: [
          { required: true, message: '请输入社会信用代码', trigger: 'blur' },
          { pattern: /^(([0-9A-Za-z]{15})|([0-9A-Za-z]{18})|([0-9A-Za-z]{20}))$/, message: '请输入正确的社会信用代码', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init()
      }
      this.visible = newVal // 监测value的变化，并赋值。
    },
    visible(val) {
      this.$emit('input', val) // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    }
  },
  methods: {
    init() {
      this.reset()
    },
    reset() {
      this.form = {
        socialCreditCode: '',
        proprietorType: '1',
        proprietorName: '',
        proprietorMobile: '',
        cardNumber: ''
      }
    },
    onSubmit: debounce(function() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        addProprietor(this.form).then(res => {
          this.$message.success(res.msg)
          this.visible = false
          this.$emit('success', res)
        })
      })
    }, 500)
  }
}
</script>

<style scoped lang="scss">
.mobile-tips {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}
</style>
